<template>
	<div class="coupon">
		<el-card shadow="hover">
			<div class="coupon-list mb15">
				<el-form :inline="true" :model="state.formData" label-width="70px" class="demo-form-inline">
					<el-row>
						<el-col :span="6">
							<el-form-item label="状态" style="width: 100%">
								<el-select style="width: 100%" @change="searchFun()" v-model="state.formData.state" placeholder>
									<el-option v-for="item in COUPON_STATUS_LIST" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="有效期" style="width: 100%">
								<el-date-picker
									@change="searchFun()"
									v-model="state.formData.time"
									type="datetimerange"
									range-separator="To"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<div style="padding-left: 10px">
								<el-button type="success" @click="setDetailId('0')">新建优惠券</el-button>
							</div>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table v-loading="state.loading" :data="state.tableData" style="width: 100%">
				<el-table-column prop="orderNumber" label="序号"></el-table-column>
				<el-table-column prop="couponCode" label="优惠券码" width="110"></el-table-column>
				<el-table-column prop="couponName" label="优惠券名称"></el-table-column>
				<el-table-column prop="preferentialAmount" label="优惠金额"></el-table-column>
				<el-table-column prop="useSites" width="100px" label="使用站点"></el-table-column>
				<el-table-column prop="used" label="已使用"></el-table-column>
				<el-table-column label="合计优惠金额" width="110">
					<template #default="scope">
						<span v-html="scope.row.totalPreferentialAmount"></span>
					</template>
				</el-table-column>
				<el-table-column prop="startDate" label="开始日期(排序)"></el-table-column>
				<el-table-column prop="endDate" label="结束日期(排序)"></el-table-column>
				<el-table-column prop="state" label="状态"></el-table-column>
				<el-table-column label="编辑" width="160px">
					<template #default="scope">
						<el-button text type="primary" @click="setDetailId(scope.row.id)">修改</el-button>
						<el-button text type="danger" @click="beforeDelete(scope.row)">结束</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="state.page.current"
				background
				v-model:page-size="state.page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.page.total"
			>
			</el-pagination>
		</el-card>
	</div>
</template>
<script setup name="Coupon">
import { useCouponHook } from './hook';

const { COUPON_STATUS_LIST, state, init, searchFun, beforeDelete, setDetailId, onHandleSizeChange, onHandleCurrentChange } = useCouponHook();

// 页面加载时
onMounted(() => {
	init();
});
</script>
<style lang="scss" scoped></style>
